<template>
    <el-card class="box-card" >
      <el-row>
        <el-col :span="6">
          车牌号：
          <el-input style="width: 150px"
            placeholder="请输入内容"
            prefix-icon="el-icon-search"
            v-model="input">
          </el-input>
        </el-col>
        <el-col :span="6">
          手机号码：
          <el-input style="width: 150px"
                    placeholder="请输入内容"
                    prefix-icon="el-icon-search"
                    v-model="input">
          </el-input>
        </el-col>
         <el-col :span="6">
            <el-button>查询</el-button>
         </el-col>
      </el-row>
      
      <el-table
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column
      fixed
      prop="date"
      label="序号"
      width="150">
    </el-table-column>
    <el-table-column
      prop="name"
      label="用户类型"
      width="120">
    </el-table-column>
    <el-table-column
      prop="province"
      label="手机号码"
      width="120">
    </el-table-column>
    <el-table-column
      prop="city"
      label="车牌号"
      width="120">
    </el-table-column>
    <el-table-column
      prop="address"
      label="订单量"
      width="100">
    </el-table-column>
    <el-table-column
      prop="zip"
      label="使用时长"
      width="120">
    </el-table-column>
        <el-table-column
            prop="zip"
            label="总金额"
            width="120">
        </el-table-column>
        <el-table-column
            prop="zip"
            label="是否黑名单"
            width="120">
        </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
     >
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)" type="text" size="small">查看详情</el-button>
      </template>
    </el-table-column>
  </el-table>
  <div class="block">
  <el-pagination
    layout="prev, pager, next"
    :total="1000">
  </el-pagination>
</div>
    </el-card>

</template>

<script>
export default {
  name: "usermanager",
  data() {
      return {
        input: '',
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-04',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1517 弄',
          zip: 200333
        }, {
          date: '2016-05-01',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1519 弄',
          zip: 200333
        }, {
          date: '2016-05-03',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1516 弄',
          zip: 200333
        }]
      }
     },
     methods: {
       handleClick(){
          this.$router.push({name:"UpdUser"})
       }
     }
}
</script>

<style>
.el-row {
  margin-bottom: 20px
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>